<template>
	<view class="c-fold" :style="{ width }" :class="ggclass">
		<view class="select" ref="content"
			:style="{  height: heights === 'auto' ? '' : heights + 'px', width}">
			<slot></slot>
		</view>
	</view>
</template>

<script>
	import propsMixin from '../mixins/props/index.js'
	export default {
		name: "c-fold",
		mixins: [propsMixin],
		props: {
			style: {
				type: Object,
				default: () => {
					return {};
				},
			},
			width: {
				type: String,
				default: "",
			},
			height: {
				type: String,
				default: "",
			},
		},
		data() {
			return {
				oldHeight: 0,
				isFold: false,
				heights: "auto",
				show: false,
			};
		},
		async mounted() {
			let obj = await this.$getNode(".select", this);
			this.oldHeight = obj.height
			this.heights = 0;
		},
		methods: {
			fole() {
				this.isFold = !this.isFold;
				if (this.isFold) {
					this.show = true;
					this.heights = JSON.parse(JSON.stringify(this.oldHeight));
				} else {
					this.heights = 0;
					this.show = false;
				}
			},
		},
	};
</script>

<style lang="less" scoped>
	.c-fold {
		// flex: 1;
		width: 100%;
		position: relative;
		display: block;
		user-select: none;

		.select {
			transition: all 0.2s;
			overflow: hidden;
		}
	}
</style>